<template>
    <div id="can1"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import { CanvasRenderer } from "echarts/renderers";
  import { init, use, dispose } from "echarts/core";
  import {
    GridComponent,
    TooltipComponent,
    DatasetComponent,
    TitleComponent,
  } from "echarts/components";
  import { BarChart } from "echarts/charts";
  
  let myChart, myCanvas;
  onMounted(() => {
    use([
      CanvasRenderer,
      GridComponent,
      TooltipComponent,
      DatasetComponent,
      TitleComponent,
      BarChart,
    ]);
    myCanvas = document.getElementById("can1");
    myChart = init(myCanvas);
    let option = {
      title: {
        text: "dataset后台数据配合dimension映射数据",
        left: "center",
      },
      xAxis: {
        type: "category",
      },
      yAxis: {},
      tooltip: {},
      dataset: {
        // 二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据：
        source: [
          { time: "2024-1-1", mary: 1000, mike: 400 },
          { time: "2024-1-2", mary: 2000, mike: 300 },
          { time: "2024-1-3", mary: 3000, mike: 600 },
        ],
        dimensions: ['time', 'mary', 'mike']
      },
      series: [
        {
          type: "bar"
        },
        {
          type: "bar"
        },
      ],
    };
    myChart.setOption(option);
  });
  
  onUnmounted(() => {
    dispose(myChart);
    myChart = null;
  });
  </script>
  
  <style>
  #can1 {
    width: 800px;
    height: 400px;
  }
  </style>
  